<template>
  <nav class="relative z-10 bg-white/95 backdrop-blur-md border-b border-gray-200">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-6">
          <!-- Logo -->
          <NuxtLink to="/" class="cursor-pointer">
            <AppLogo :size="logoSize" :show-decorations="showDecorations" />
          </NuxtLink>
          
          <!-- 分割线 -->
          <div v-if="showBackButton" class="h-6 w-px bg-gray-300"></div>
          
          <!-- 返回按钮 -->
          <button 
            v-if="showBackButton"
            @click="goBack" 
            class="group relative inline-flex items-center px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-blue-50 border border-gray-200 hover:border-blue-200"
          >
            <!-- 左侧箭头图标 -->
            <div class="relative flex items-center">
              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 transition-all duration-300 group-hover:bg-blue-200">
                <i class="bi bi-arrow-left text-blue-600 text-sm transition-all duration-300 group-hover:-translate-x-0.5"></i>
              </div>
              
              <!-- 文字 -->
              <div class="text-left">
                <div class="text-gray-900 text-sm font-semibold transition-all duration-300">返回</div>
              </div>
            </div>
          </button>
        </div>

        <!-- 面包屑导航 -->
        <div v-if="showBreadcrumb && breadcrumbItems && breadcrumbItems.length > 0" 
             class="hidden md:flex items-center space-x-2 text-sm text-gray-600">
          <template v-for="(item, index) in breadcrumbItems" :key="index">
            <NuxtLink v-if="item.path" :to="item.path" 
                     class="hover:text-blue-600 transition-colors duration-200">
              {{ item.label }}
            </NuxtLink>
            <span v-else class="text-gray-900 font-medium">{{ item.label }}</span>
            <i v-if="index < breadcrumbItems.length - 1" class="bi bi-chevron-right text-gray-400 text-xs"></i>
          </template>
        </div>

        <!-- 右侧功能区 -->
        <div class="flex items-center space-x-4">
          <!-- 位置信息 -->
          <HeaderLocation v-if="showLocation" />

          <!-- 导航菜单 -->
          <div v-if="showNavMenu" class="hidden lg:flex items-center space-x-6">
            <NuxtLink to="/" 
                     class="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                     :class="{ 'text-blue-600 font-semibold': $route.path === '/' }">
              首页
            </NuxtLink>
            <NuxtLink to="/products" 
                     class="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                     :class="{ 'text-blue-600 font-semibold': $route.path.startsWith('/products') }">
              产品中心
            </NuxtLink>
            <NuxtLink to="/orders" 
                     class="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                     :class="{ 'text-blue-600 font-semibold': $route.path.startsWith('/orders') }">
              订单管理
            </NuxtLink>
            <NuxtLink to="/customer-service" 
                     class="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                     :class="{ 'text-blue-600 font-semibold': $route.path === '/customer-service' }">
              客户服务
            </NuxtLink>
          </div>

          <!-- 搜索按钮 -->
          <button v-if="showSearchButton" 
                  @click="toggleSearch"
                  class="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200">
            <i class="bi bi-search text-lg"></i>
          </button>

          <!-- 通知按钮 -->
          <button v-if="showNotificationButton" 
                  @click="showNotifications"
                  class="relative p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200">
            <i class="bi bi-bell text-lg"></i>
            <span v-if="notificationCount > 0" 
                  class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
              {{ notificationCount > 99 ? '99+' : notificationCount }}
            </span>
          </button>

          <!-- 用户菜单 -->
          <div class="relative" ref="userMenuRef">
            <button @click="toggleUserMenu" 
                    class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-50 transition-colors duration-200">
              <div v-if="userStore.isLoggedIn" class="flex items-center space-x-2">
                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                  <i class="bi bi-person-fill text-blue-600"></i>
                </div>
                <span class="hidden md:block text-sm font-medium text-gray-900">
                  {{ userStore.user?.nickname || '用户' }}
                </span>
              </div>
              <div v-else class="flex items-center space-x-2">
                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                  <i class="bi bi-person text-gray-600"></i>
                </div>
                <span class="hidden md:block text-sm text-gray-600">登录</span>
              </div>
              <i class="bi bi-chevron-down text-xs text-gray-500 transition-transform duration-200"
                 :class="{ 'rotate-180': showUserMenuDropdown }"></i>
            </button>

            <!-- 用户菜单下拉 -->
            <div v-if="showUserMenuDropdown" 
                 class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-20">
              <template v-if="userStore.isLoggedIn">
                <NuxtLink to="/profile" 
                         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                  <i class="bi bi-person mr-2"></i>个人资料
                </NuxtLink>
                <NuxtLink to="/orders" 
                         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                  <i class="bi bi-list-ul mr-2"></i>我的订单
                </NuxtLink>
                <NuxtLink to="/addresses" 
                         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                  <i class="bi bi-geo-alt mr-2"></i>收货地址
                </NuxtLink>
                <div class="border-t border-gray-200 my-1"></div>
                <button @click="logout" 
                        class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors duration-200">
                  <i class="bi bi-box-arrow-right mr-2"></i>退出登录
                </button>
              </template>
              <template v-else>
                <NuxtLink to="/auth/login" 
                         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                  <i class="bi bi-box-arrow-in-right mr-2"></i>登录
                </NuxtLink>
                <NuxtLink to="/auth/register" 
                         class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                  <i class="bi bi-person-plus mr-2"></i>注册
                </NuxtLink>
              </template>
            </div>
          </div>

          <!-- 移动端菜单按钮 -->
          <button class="lg:hidden p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
                  @click="toggleMobileMenu">
            <i class="bi bi-list text-lg"></i>
          </button>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div v-if="showMobileMenuDropdown" class="lg:hidden mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
        <div class="space-y-2">
          <NuxtLink to="/" 
                   class="block py-2 text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                   @click="toggleMobileMenu">
            首页
          </NuxtLink>
          <NuxtLink to="/products" 
                   class="block py-2 text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                   @click="toggleMobileMenu">
            产品中心
          </NuxtLink>
          <NuxtLink to="/orders" 
                   class="block py-2 text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                   @click="toggleMobileMenu">
            订单管理
          </NuxtLink>
          <NuxtLink to="/customer-service" 
                   class="block py-2 text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
                   @click="toggleMobileMenu">
            客户服务
          </NuxtLink>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useUserStore } from '~/stores/user'
import { ref, onMounted, onUnmounted } from 'vue'

// Props
const props = defineProps({
  showBackButton: {
    type: Boolean,
    default: false
  },
  showNavMenu: {
    type: Boolean,
    default: true
  },
  showBreadcrumb: {
    type: Boolean,
    default: false
  },
  showLocation: {
    type: Boolean,
    default: true
  },
  showSearchButton: {
    type: Boolean,
    default: true
  },
  showNotificationButton: {
    type: Boolean,
    default: true
  },
  showDecorations: {
    type: Boolean,
    default: true
  },
  logoSize: {
    type: String,
    default: 'medium'
  },
  currentPageTitle: {
    type: String,
    default: ''
  },
  breadcrumbItems: {
    type: Array,
    default: () => []
  }
})

// Store
const userStore = useUserStore()

// Reactive data
const showUserMenuDropdown = ref(false)
const showMobileMenuDropdown = ref(false)
const notificationCount = ref(0)
const userMenuRef = ref(null)

// Methods
const goBack = () => {
  window.history.back()
}

const toggleSearch = () => {
  // 实现搜索功能
  console.log('搜索功能')
}

const showNotifications = () => {
  // 实现通知功能
  console.log('显示通知')
}

const toggleUserMenu = () => {
  showUserMenuDropdown.value = !showUserMenuDropdown.value
}

const toggleMobileMenu = () => {
  showMobileMenuDropdown.value = !showMobileMenuDropdown.value
}

const logout = async () => {
  try {
    await userStore.logout()
    showUserMenuDropdown.value = false
    navigateTo('/auth/login')
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}

// 点击外部关闭菜单
const handleClickOutside = (event) => {
  if (userMenuRef.value && !userMenuRef.value.contains(event.target)) {
    showUserMenuDropdown.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
/* 现代化导航样式 */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* 平滑过渡效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 下拉菜单动画 */
.dropdown-enter-active, .dropdown-leave-active {
  transition: all 0.3s ease;
}

.dropdown-enter-from, .dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style> 